import Vue from 'vue'
export default () => {
  Vue.directive('watermark', (el, binding) => {
    function addWaterMarker(str1, str2, parentNode, font, textColor) { // str1、str2水印文字，父元素，字体，文字颜色
      const img = document.createElement('canvas') // 创建canvas元素
      parentNode.appendChild(img)
      img.width = 490
      img.height = 390
      img.style.display = 'none'
      const imgs = img.getContext('2d') // 获取canvas画布
      imgs.rotate(-20 * Math.PI / 180) // 逆时针旋转π/9
      imgs.font = font || '30px Microsoft JhengHei'
      imgs.fillStyle = textColor || 'rgba(50, 200, 200, 0.1)'
      imgs.textAlign = 'left'
      imgs.textBaseline = 'Middle'
      imgs.fillText(str1, 15, 200) // 第一行字体
      imgs.fillText(str2, 15, 100) // 第二行字体
      parentNode.style.backgroundImage = 'url(' + img.toDataURL('image/png') + ')'
    }
    addWaterMarker(binding.value.text1, binding.value.text2, el, binding.value.font, binding.value.textColor)
  })
}
